<!DOCTYPE html>
<html
  prefix="
    xhv: http://www.w3.org/1999/xhtml/vocab#
    xsd: http://www.w3.org/2001/XMLSchema#
    rdfs: http://www.w3.org/2000/01/rdf-schema#
    dc: http://purl.org/dc/terms/
    vcard: http://www.w3.org/2006/vcard/ns#
    v: http://rdf.data-vocabulary.org/#"
  lang="en" >
  <head>
    <title>JSON-LD 1.0 Playground</title>

    <!-- Meta Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- Style Sheets -->
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap/bootstrap.css">

    <!-- CodeMirror -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/g/bootstrap@2.3.1(css/bootstrap-responsive.min.css),codemirror@3.22.0(codemirror.css+addon/lint/lint.css+addon/hint/show-hint.css+theme/neat.css)">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/fontawesome/3.2.1/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./playground.css">
    <link rel="stylesheet" type="text/css" href="./jsonld-vis.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/rdf-font/rdf-font.css">

    <link rel="shortcut icon" href="../../favicon.ico" />
  </head>

  <body id="page-playground" onload="playground.init();">
    <div class="navbar navbar-static-top">
      <div class="navbar-inner">
        <div class="row-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="../"><img src="../../images/json-ld-data-24.png" alt="JSON-LD logo"> JSON-LD</a>
          <div class="nav-collapse">
          <ul class="nav">
            <li class="active">
              <a href="../../playground/"><span class="icon-beer"></span> Playground</a>
            </li>
            <li>
              <a href="../../learn/"><span class="icon-book"></span> Documentation</a>
            </li>
            <li><a href="../#developers"><span class="icon-beaker"></span> Developers</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="icon-folder-open"></span> Specifications <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                  <li class="nav-header"><strong>W3C Recommendations</strong></li>
                  <li><a href="https://www.w3.org/TR/json-ld/">Syntax</a></li>
                  <li><a href="https://www.w3.org/TR/json-ld-api/">Processing Algorithms and API</a></li>
                  <li><a href="https://www.w3.org/TR/json-ld-framing/">Framing</a></li>
                  <li class="divider"></li>
                  <li class="nav-header"><strong>Latest Drafts</strong></li>
                  <li><a href="https://w3c.github.io/json-ld-syntax/">Syntax</a></li>
                  <li><a href="https://w3c.github.io/json-ld-api/">Processing Algorithms and API</a></li>
                  <li><a href="https://w3c.github.io/json-ld-framing/">Framing</a></li>
                  <li><a href="https://w3c.github.io/json-ld-bp/">Best Practices</a></li>
                  <li><a href="https://w3c.github.io/json-ld-streaming/">Streaming</a></li>
                  <li><a href="https://w3c.github.io/json-ld-cbor/">CBOR</a></li>
                  <li><a href="https://json-ld.github.io/json-ld-star/">JSON-LD-star</a></li>
                  <li><a href="https://github.com/w3c/json-ld-rc/">Recommended Context</a></li>
                  <li><a href="https://json-ld.github.io/yaml-ld/">YAML-LD</a></li>
                  <li><a href="/spec/">1.0 drafts (historic)</a></li>
              </ul>
            </li>
            <li><a href="../../images/"><span class="icon-picture"></span> Branding</a></li>
            </ul>
          </div>
          <!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <br/>
      <h2>JSON-LD 1.0 Playground</h2>
      <br/>
      <p>Play around with JSON-LD markup by typing out
        some JSON below and seeing what gets generated from it at the
        bottom of the page. Pick any of the examples below to get started.
        The playground uses the <a href="https://github.com/digitalbazaar/jsonld.js">jsonld.js</a>
        processor which <a href="https://github.com/digitalbazaar/jsonld.js#conformance">conforms</a>
        to the JSON-LD 1.0 <a href="https://www.w3.org/TR/2014/REC-json-ld-20140116/">syntax</a>
        and <a href="https://www.w3.org/TR/2014/REC-json-ld-api-20140116/">API</a>
        recommendations and the <a href="https://json-ld.org/spec/ED/json-ld-framing/20120830/">framing</a> unofficial draft.
      </p>
      <div class="alert alert-warning">
        <strong>NOTE</strong>: This is a snapshot of an older playground supporting <a href="https://www.w3.org/TR/2014/REC-json-ld-20140116/">JSON-LD 1.0</a>. A version that supports recent features and has a JSON-LD 1.0 compatibility mode is <a href="..">available</a>.
      </div>
    </div>

    <div class="loading hero">
      <h1><i class="icon-spinner icon-spin icon-large"></i> Loading the Playground...
    </div>
    <div class="loaded hide">
      <div class="container">
        <div class="btn-group" data-toggle="buttons-radio">
          <button class="btn disabled btn-primary">Examples:</button>
          <button id="btn-person" class="btn button">
            <i class="icon icon-user"></i>
            <span>Person</span>
          </button>
          <button id="btn-event" class="btn button">
            <i class="icon icon-calendar"></i>
            <span>Event</span>
          </button>
          <button id="btn-place" class="btn button">
            <i class="icon icon-map-marker"></i>
            <span>Place</span>
          </button>
          <button id="btn-product" class="btn button">
            <i class="icon icon-barcode"></i>
            <span>Product</span>
          </button>
          <button id="btn-recipe" class="btn button">
            <i class="icon icon-food"></i>
            <span>Recipe</span>
          </button>
          <button id="btn-library" class="btn button">
            <i class="icon icon-book"></i>
            <span>Library</span>
          </button>
          <button id="btn-activity" class="btn button">
            <i class="icon icon-comment"></i>
            <span>Activity</span>
          </button>
        </div>

        <div class="pull-right">
          <a class="btn hide" id="permalink">
            <i class="icon icon-link"></i>
            <span>Permalink</span>
          </a>
          <a class="btn" id="gist">
            <i class="icon icon-github"></i>
            <span>Gist</span>
          </a>
          <button class="btn popover-info" title="Keyboard shortcuts">
            <i class="icon icon-keyboard"></i> Shortcuts
          </button>
          <div class="popover-info-content hide">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Key</th>
                  <th>Autocomplete</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><label class="label">@</label></td>
                  <td>all of the <b>@</b> keywords</td>
                </tr>
                <tr>
                  <td><label class="label">Ctrl+Space</label></td>
                  <td>available keys in <b>@context</b></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="container" id="markup-container">
          <div class="row">
            <div id="markup-div" class="span12">
              <div class="pull-right editor-options">
                <div class="input-prepend editor-option" title="Use remote document" data-editor="markup">
                  <button class="btn" type="button" data-toggle="button">
                    <span class="icon-stack">
                      <i class="icon-cloud icon-stack-base icon-muted"></i>
                      <i class="icon-file"></i>
                    </span>
                  </button>
                  <input class="span2" type="text" placeholder="Document URL"/>
                </div>
              </div>
              <h3>JSON-LD Input</h3>
              <textarea id="markup" class="compressed process span6 codemirror-input"
              placeholder="Enter your JSON-LD markup here..." rows="10"></textarea>
            </div>

            <div id="context-div" class="span6">
              <div class="pull-right editor-options">
                <div class="input-prepend editor-option" title="Use remote context" data-editor="context">
                  <button class="btn" type="button" data-toggle="button">
                    <span class="icon-stack">
                      <i class="icon-cloud icon-stack-base icon-muted"></i>
                      <i class="icon-bullseye"></i>
                    </span>
                  </button>
                  <input class="span2" type="text" placeholder="Context URL"/>
                </div>
              </div>
              <h3>New JSON-LD Context</h3>
              <button class="btn" data-toggle="button" id="copy-context" title='Copy context from "JSON-LD Input"'>
                <i class="icon-circle-arrow-right"></i>
              </button>

              <textarea id="context" class="compressed process span6 codemirror-input"
              placeholder="Enter the new JSON-LD context to compact to here..." rows="10">{}</textarea>
            </div>

            <div id="frame-div" class="span6">
              <h3>
                JSON-LD Frame
                <div class="pull-right editor-options">
                  <div class="input-prepend editor-option" title="Use remote frame" data-editor="frame">
                    <button class="btn" type="button" data-toggle="button">
                      <span class="icon-stack">
                        <i class="icon-cloud icon-stack-base icon-muted"></i>
                        <i class="icon-crop"></i>
                      </span>
                    </button>
                    <input class="span2" type="text" placeholder="Frame URL" />
                  </div>
                </div>
              </h3>
              <textarea id="frame" class="compressed process span6 codemirror-input"
              placeholder="Enter your JSON-LD frame here..." rows="10">{}</textarea>
            </div>

            <div id="privatekey-rsa-div" class="span6">
              <h3>
                PEM-encoded Private Key
                <div class="pull-right editor-options">
                  <div class="input-prepend editor-option" title="Use remote private key" data-editor="privatekey-rsa">
                    <button class="btn" type="button" data-toggle="button">
                      <span class="icon-stack">
                        <i class="icon-cloud icon-stack-base icon-muted"></i>
                        <i class="icon-crop"></i>
                      </span>
                    </button>
                    <input class="span2" type="text" placeholder="Private Key URL" />
                  </div>
                </div>
              </h3>
              <textarea id="privatekey-rsa" class="compressed process span6 codemirror-input"
              placeholder="Enter your PEM-encoded private key here..." rows="10">
-----BEGIN RSA PRIVATE KEY-----
MIICWwIBAAKBgQC4R1AmYYyE47FMZgo708NhFU+t+VWn133PYGt/WYmD5BnKj679
YiUmyrC3hX6oZfo4eVpOkycxZvGgXCLQGuDp45XfZkdsjqs3o62En4YjlHWxgeGm
kiRqGfZ3sJ3u5WZ2xwapdZY3/2T/oOV5ri8SktTvmVGCyhwFuJC/NbJMEwIDAQAB
AoGAZXNdPMQXiFGSGm1S1P0QYzJIW48ZCP4p1TFP/RxeCK5bRJk1zWlq6qBMCb0E
rdD2oICupvN8cEYsYAxZXhhuGWZ60vggbqTTa+4LXB+SGCbKMX711ZoQHdY7rnaF
b/Udf4wTLD1yAslx1TrHkV56OfuJcEdWC7JWqyNXQoxedwECQQDZvcEmBT/Sol/S
AT5ZSsgXm6xCrEl4K26Vyw3M5UShRSlgk12gfqqSpdeP5Z7jdV/t5+vD89OJVfaa
Tw4h9BibAkEA2Khe03oYQzqP1V4YyV3QeC4yl5fCBr8HRyOMC4qHHKQqBp2VDUyu
RBJhTqqf1ErzUBkXseawNxtyuPmPrMSl6QJAQOgfu4W1EMT2a1OTkmqIWwE8yGMz
Q28u99gftQRjAO/s9az4K++WSUDGkU6RnpxOjEymKzNzy2ykpjsKq3RoIQJAA+XL
huxsYVE9Yy5FLeI1LORP3rBJOkvXeq0mCNMeKSK+6s2M7+dQP0NBYuPo6i3LAMbi
yT2IMAWbY76Bmi8TeQJAfdLJGwiDNIhTVYHxvDz79ANzgRAd1kPKPddJZ/w7Gfhm
8Mezti8HCizDxPb+H8HlJMSkfoHx1veWkdLaPWRFrA==
-----END RSA PRIVATE KEY-----
              </textarea>
            </div>

            <div id="privatekey-koblitz-div" class="span6">
              <h3>Bitcoin (ECDSA Koblitz) Private Key for Signing</h3>
              <textarea id="privatekey-koblitz" class="compressed process span6 codemirror-input"
                placeholder="Enter your Bitcoin (Koblitz) private key here..." rows="3">L4mEi7eEdTNNFQEWaa7JhUKAbtHdVvByGAqvpJKC53mfiqunjBjw</textarea>

              <h3>Bitcoin (ECDSA Koblitz) Public Key for Verification</h3>
              <textarea id="publickey-koblitz" class="compressed process span6 codemirror-input"
                placeholder="Enter your Bitcoin (Koblitz) public key here..." rows="3">1LGpGhGK8whX23ZNdxrgtjKrek9rP4xWER</textarea>

              <div class="koblitz-verification"></div>
            </div>


          </div>
        </div>

        <div id="markup-errors" class="hide alert alert-error"></div>
        <div id="param-errors" class="hide alert alert-error"></div>
        <div id="validation-errors" class="hide alert alert-error"></div>
        <div id="validation-message" class="hide alert alert-success"></div>
        <div id="using-context-map" class="hide alert alert-note">
          <p>NOTE: A remote context that is not known to be fully working yet was detected in your input.
            If you wish, you can use an alternative context created by the JSON-LD community to
            process your document nevertheless.</p>
          <label class="checkbox">
            <input type="checkbox" id="use-context-map" value="1"> Use development context
          </label>
          <table class="table table-condensed">
            <thead>
              <tr>
                <td>Original</td>
                <td>Development</td>
              </tr>
            </thead>
            <tbody>
              <!-- dynamic rows -->
            </tbody>
          </table>
        </div>
        <div id="processing-errors" class="hide alert alert-error"></div>

        <div id="output-container">
          <ul id="tabs" class="nav nav-tabs">
            <li class="active">
              <a id="tab-expanded" href="#pane-expanded" data-toggle="tab" name="tab-expanded">
                <i class="icon-resize-full"></i>
                <span>Expanded</span>
              </a>
            </li>
            <li>
              <a id="tab-compacted" href="#pane-compacted" data-toggle="tab" name="tab-compacted">
                <i class="icon-resize-small"></i>
                <span>Compacted</span>
              </a>
            </li>
            <li>
              <a id="tab-flattened" href="#pane-flattened" data-toggle="tab" name="tab-flattened">
                <i class="icon-reorder"></i>
                <span>Flattened</span>
              </a>
            </li>
            <li>
              <a id="tab-framed" href="#pane-framed" data-toggle="tab" name="tab-framed">
                <i class="icon-crop"></i>
                <span>Framed</span>
              </a>
            </li>
            <li>
              <a id="tab-nquads" href="#pane-nquads" data-toggle="tab" name="tab-nquads">
                <i class="rdf-icon-rdf"></i>
                <span>N-Quads</span>
              </a>
            </li>
            <li>
              <a id="tab-normalized" href="#pane-normalized" data-toggle="tab" name="tab-normalized">
                <i class="icon-archive"></i>
                <span>Normalized</span>
              </a>
            </li>
            <li>
              <a id="tab-table" href="#pane-table" data-toggle="tab" name="tab-table">
                <i class="icon-th"></i>
                <span>Table</span>
              </a>
            </li>
            <li>
              <a id="tab-visualized" href="#pane-visualized" data-toggle="tab" name="tab-visualized">
                <i class="icon-eye-open"></i>
                <span>Visualized</span>
              </a>
            </li>
            <li>
              <a id="tab-signed-rsa" href="#pane-signed-rsa" data-toggle="tab" name="tab-signed-rsa">
                <i class="icon-pencil"></i>
                <span>Signed with RSA</span>
              </a>
            </li>
            <li>
              <a id="tab-signed-koblitz" href="#pane-signed-koblitz" data-toggle="tab" name="tab-signed-koblitz">
                <i class="icon-pencil"></i>
                <span>Signed with Bitcoin</span>
              </a>
            </li>
          </ul>

          <div class="tab-content">
            <div id="pane-expanded" class="tab-pane active">
              <textarea id="expanded" class="codemirror-output"></textarea>
            </div>
            <div id="pane-compacted" class="tab-pane">
              <textarea id="compacted" class="codemirror-output"></textarea>
            </div>
            <div id="pane-flattened" class="tab-pane">
              <textarea id="flattened" class="codemirror-output"></textarea>
            </div>
            <div id="pane-framed" class="tab-pane">
              <textarea id="framed" class="codemirror-output"></textarea>
            </div>
            <div id="pane-nquads" class="tab-pane">
              <textarea id="nquads" class="codemirror-output"></textarea>
            </div>
            <div id="pane-normalized" class="tab-pane">
              <textarea id="normalized" class="codemirror-output"></textarea>
            </div>
            <div id="pane-table" class="tab-pane">
              <table id="table" class="table table-condensed">
                <thead>
                  <tr>
                    <th>Subject</th>
                    <th>Predicate</th>
                    <th>Object</th>
                    <th>Language</th>
                    <th>Datatype</th>
                    <th>Graph</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
            <div id="pane-visualized" class="tab-pane">
              <div id="visualized" style="background: white"></div>
            </div>
            <div id="pane-signed-rsa" class="tab-pane">
              <textarea id="signed-rsa" class="codemirror-output"></textarea>
            </div>
            <div id="pane-signed-koblitz" class="tab-pane">
              <textarea id="signed-koblitz" class="codemirror-output"></textarea>
            </div>
          </div><!-- /.tab-content -->
        </div>

        <hr/>
      </div> <!-- /.container -->
    </div> <!-- /.loading -->

    <div class="container">
      <div id="footer">
        <p id="copyright">
         Website content released under a <a href="http://creativecommons.org/about/cc0">Creative Commons CC0 Public Domain Dedication</a> except where an alternate is specified.
         Part of the <a href="http://payswarm.com/">PaySwarm</a> standardization initiative.
        </p>
      </div>
    </div>

    <!-- sccdn scripts -->
    <script src="//cdn.jsdelivr.net/g/async@1.5.0,jquery@1.11.0,es6-promise@1.0.0,bootstrap@2.3.2,codemirror@3.22.0(codemirror.min.js+addon/lint/lint.js+addon/edit/matchbrackets.js+addon/edit/closebrackets.js+addon/display/placeholder.js+addon/hint/show-hint.js+mode/ntriples/ntriples.js+mode/javascript/javascript.js)"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsonld@0.5.21/dist/jsonld.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
    <script src="./jsonld-vis.js"></script>

    <!-- local scripts -->
    <script src="./forge.min.js"></script>
    <script src="./bitcore-message.js"></script>
    <script src="./jsonld-signatures.js"></script>
    <script src="./jsonlint.js"></script>
    <script src="./tv4.min.js"></script>
    <script src="./json-schema-lint.js"></script>
    <script src="./jsonld-hint.js"></script>
    <script src="./playground.js"></script>
    <script src="./playground-examples.js"></script>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-42886053-1', 'json-ld.org');
      ga('send', 'pageview');
    </script>

    <script type="text/javascript">
      $('#context-div').hide();
      $('#frame-div').hide();
      $('#privatekey-rsa-div').hide();
      $('#privatekey-koblitz-div').hide();
      $('#markup,#context,#frame').bind('keyup', function() {
        $('.btn-group > .btn').each(function () {
          $(this).removeClass('active');
        });
      });
    </script>

  </body>
</html>
